<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <title>每一代人数</title>
    <style>
        body {
            margin: 0;
        }
        header {
            width: 100%;
            height: 50px;
            background-color: #1b1b21;
            /*padding: 10px 0;*/
        }
        header a {
            position: absolute;
            top: 3px;
            display: block;
            width: 62px;
        }
        header span {
            position: absolute;
            color: #fff;
            top: 15px;
            left: 30px;
        }
        header .go-back {
            margin: 14px 10px;
            float: left;
            width: 25px;
        }
        header h4 {
            width: 100%;
            line-height: 55px;
            margin: 0;
            text-align: center;
            color: #fff;
            font-weight: normal;
        }
        .highcharts-credits {
            display: none;
        }
    </style>
</head>
<body>
<header>
    <a href="javascript:;" onclick="window.history.back()"><img src="${ctx}/static/h5/images/back.png" class="go-back" alt=""/><span>返回</span></a>
    <h4>家族数据</h4>
</header>
<div id="container" style="width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable" style="display: none">
    <thead>
    <tr>
        <th></th>
        <th>每一代人数</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${fplist}" var="fplist">
        <tr>
            <th>第${fplist.generation}代</th>
            <td>${fplist.count}</td>
        </tr>
    </c:forEach>
    <%--<tr>--%>
        <%--<th>第一代</th>--%>
        <%--<td>20</td>--%>
    <%--</tr>--%>
    <%--<tr>--%>
        <%--<th>第二代</th>--%>
        <%--<td>40</td>--%>
    <%--</tr>--%>
    <%--<tr>--%>
        <%--<th>第三代</th>--%>
        <%--<td>60</td>--%>
    <%--</tr>--%>
    <%--<tr>--%>
        <%--<th>第四代</th>--%>
        <%--<td>80</td>--%>
    <%--</tr>--%>
    <%--<tr>--%>
        <%--<th>第五代</th>--%>
        <%--<td>100</td>--%>
    <%--</tr>--%>
    </tbody>
</table>
</body>
<script>
    $(function () {
        $('#container').highcharts({
            data: {
                table: 'datatable'
            },
            chart: {
                type: 'column'
            },
            title: {
                text: '每一代人数'
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: '个',
                    rotation: 0
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' 个' + this.point.name.toLowerCase();
                }
            }
        });
    });

</script>
</html>